<template>
  <div id="app">
    <fake-button>正常</fake-button>
    <fake-button size="small">小号</fake-button>
    <fake-button size="big">大号</fake-button>
    <fake-button round>圆角</fake-button>
    <fake-button loading>加载</fake-button>
    <fake-button color="danger">危险</fake-button>
    <fake-button color="warn">警告</fake-button>
    <fake-button color="#333">自定色</fake-button>
    <fake-button icon="good">带图标</fake-button>
    <fake-button icon="search" icon-position="right">图标在右</fake-button>
    <fake-button class="test">属性传递</fake-button>
    <fake-button @click="test">点击</fake-button>
    <fake-button @mouseenter="test1">鼠标移入</fake-button>
    <fake-button disabled>禁用</fake-button>
    <fake-button disabled readonly>禁用/只读</fake-button>
    <fake-button readonly>只读</fake-button>
    <fake-button readonly>新增测试</fake-button>
    <fake-button readonly>新增测试2</fake-button>
    <fake-button readonly>新增测试3</fake-button>
    <fake-button readonly>新增测试4</fake-button>
    <fake-button readonly>新增测试5</fake-button>
  </div>
</template>


<script>


export default {
  name: 'App',
  methods:{
    test(){
      alert('click')
    },
    test1(){
      alert('mouseenter')
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
